import { FlatList, SafeAreaView, StyleSheet, View } from 'react-native';

import { ThemedText } from "@/components/ThemedText";
import { ThemedView } from "@/components/ThemedView";
import Constants from 'expo-constants';
import { Image } from "expo-image";
import { Link } from "expo-router";
import { useEffect, useState } from "react";

export default function HomeScreen() {
    const [user, setUser] = useState({
        name: 'Rocc'
    })
    const [history, setHistory] = useState<any>([]);

    useEffect(() => {
        let data = [
            {
                friendName: 'Roc',
                avatarUrl: 'http://rocc.uno/api/static/8e5c3c1d-b247-4cd8-936c-30b878515298.jpg',
                lastMsg: '你不试试怎么知道自己不行！',
                lastMsgTime: '2023-05-05 12:00:00'
            },
            {
                friendName: 'Roc',
                avatarUrl: 'http://rocc.uno/api/static/8e5c3c1d-b247-4cd8-936c-30b878515298.jpg',
                lastMsg: '你不试试怎么知道自己不行！',
                lastMsgTime: '2023-05-05 12:00:00'
            },
            {
                friendName: 'Roc',
                avatarUrl: 'http://rocc.uno/api/static/8e5c3c1d-b247-4cd8-936c-30b878515298.jpg',
                lastMsg: '你不试试怎么知道自己不行！',
                lastMsgTime: '2023-05-05 12:00:00'
            },
            {
                friendName: 'Roc',
                avatarUrl: 'http://rocc.uno/api/static/8e5c3c1d-b247-4cd8-936c-30b878515298.jpg',
                lastMsg: '你不试试怎么知道自己不行！',
                lastMsgTime: '2023-07-07 12:00:00'
            },
        ]

        const now = new Date()
        const nowMonthDay = now.getFullYear() + '-' + now.getMonth() + '-' + now.getDate()
        data = data.map(item => {
            const monthDay = item.lastMsgTime.substring(0, 10)
            if (monthDay === nowMonthDay) {
                item.lastMsgTime = item.lastMsgTime.substring(11, 16)
            } else {
                item.lastMsgTime = monthDay.substring(5)
            }
            return item
        })

        setHistory(data)
    }, []);

    return (
        <SafeAreaView style={{paddingTop: Constants.statusBarHeight}}>
            <View className={'flex flex-row justify-between items-center py-5 px-2 '}>
                <ThemedText className={'text-xl font-bold'}>Welcome {user.name}</ThemedText>
                <Image style={{width: 60, height: 60, borderRadius: 60}}
                       source={'http://rocc.uno/api/static/8e5c3c1d-b247-4cd8-936c-30b878515298.jpg'}/>
            </View>

            <ThemedView className={'m-2 p-2 rounded-lg'}>
                <FlatList
                    data={history}
                    renderItem={({item}) => <Link href={'/private_chat'}> <ThemedView
                        className={'flex flex-row items-center p-2 my-1 bg-transparent'}
                        style={{backgroundColor: 'transparent'}}>
                        <Image style={{width: 50, height: 50, borderRadius: 50}} source={item.avatarUrl}/>
                        <View className={'ms-4 flex-grow'}>
                            <ThemedText className={'font-bold'} style={{fontSize: 18}}>{item.friendName}</ThemedText>
                            <ThemedText className={'text-sm text-gray-500'}
                                        style={{fontSize: 13}}>{item.lastMsg}</ThemedText>
                        </View>
                        <View>
                            <ThemedText
                                style={{fontSize: 10, color: 'gray'}}
                            >{
                                item.lastMsgTime
                            }</ThemedText>
                        </View>
                    </ThemedView>
                    </Link>
                    }
                />
            </ThemedView>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {}
});
